<!--
* description: 区间选择
* author:xlw
* createdDate: 2020-12-10
-->
<template>
  <el-col :span="span" v-show="curIsShow" :key="fullComponentKey">
    <lableName
      :validrule="validrule"
      :curLabelName="curLabelName"
      @clickEvent="sendLabelCode"
      :isShowLabel="isShowLabel"
      :isRequire="isRequire"
      :curisFunc="curisFunc"
      :maxWordCount="dataToObject == null ? 6 : dataToObject.maxWordCount"
      :labelWidth="labelWidth"
    ></lableName>
    <el-input
      placeholder="请输入"
      v-model="modelCodeMin"
      @change="handleMinChange"
      style="width:32%"
    />
    <span class="Symbol">%~</span>
    <el-input
      placeholder="请输入"
      v-model="modelCodeMax"
      @change="handleMaxChange"
      style="width:32%"
    /><span class="Symbol1">%</span>
  </el-col>
</template>
  
<script>
const MIN_NUMBER = 1;
const MAX_NUMBER = 100;
import { inputMixins } from "@/components/mixins/inputMixins";
export default {
  mixins: [inputMixins],
  components: {
    lableName: () => import("@/components/lableName"), //标题溢出样式组件
    // validateFormate: () => import("@/components/validateFormate"), //校验提示样式组件
  },
  props: {
    labelName: { type: String, default: "" },
    codeField: { type: String, default: "" },
  },
  data() {
    return {
       // 绑定传入值并同步界面数据
      modelCodeMin: '',
      modelCodeMax: '',
      code:'',
      rules: {
        min: [
          { validator: this.validateCom, trigger: "blur" },
          { validator: this.validateMin, trigger: "blur" },
        ],
        max: [
          { validator: this.validateCom, trigger: "blur" },
          { validator: this.validateMax, trigger: "blur" },
        ],
      },
    };
  },
  watch:{
    modelCodeMin(val,old){
      this.code=val+','+this.modelCodeMax
    },
    modelCodeMax(val,old){
      this.code=this.modelCodeMin+','+val
    },
  },
  methods: {
    getFormData() {
      const ret = {};
      this.$refs.form.validate((valid) => {
        ret.valid = valid;
        ret.form = this.form;
      });
      return ret;
    },
    resetForm() {
      this.$refs.form.resetFields();
    },
    handleMinChange() {
        this.send()
    },
    handleMaxChange() {
      this.send()
    },
    send(){
      let code='' 
      let text=''
       code = this.modelCodeMin+','+this.modelCodeMax
       this.$emit('changeCode', code, text, this.codeField, this.comType, this.popupsKey)
    },
    validateCom(rule, value, callback) {
      const one = Number(value);
      if (Number.isInteger(one)) {
        if (one < MIN_NUMBER) {
          return callback(new Error("输入值必须大于0"));
        } else if (one > MAX_NUMBER) {
          return callback(new Error("输入值必须小于100"));
        }
        return callback();
      }
      return callback(new Error("输入值必须为正整数"));
    },
    validateMin(rule, value, callback) {
      const one = Number(value);
      const max = Number(this.form.max);
      if (!max || one < max) {
        return callback();
      }
      return callback(new Error("输入值不得大于最大阈值"));
    },
    validateMax(rule, value, callback) {
      const one = Number(value);
      const min = Number(this.form.min);
      if (!min || one > min) {
        return callback();
      }
      return callback(new Error("输入值不得小于最小阈值"));
    },
  },
};
</script>
<style lang='scss' >
.Symbol {
  float: left;
  text-align: center;
  font-size: 12px;
  padding-right: 5px;
  padding-top: 3px;
}
.Symbol1 {
  text-align: center;
  font-size: 12px;
  float: left;
  padding-top: 3px;
}

</style>